<template>
    <div class="doctorListback">

        <van-nav-bar title="医生列表" left-arrow @click-left="onClickLeft" />

        <div v-if="isLoading">
            <div class="loading">加载中...</div>
        </div>

        <div v-else-if="personLs.length">
            <div class="inpText">
                <!-- <img src="https://cdn7.axureshop.com/demo/2208121/images/%E7%A7%91%E5%AE%A4%E5%88%97%E8%A1%A8/u684.svg"
                    alt="" class="imginp"> -->
                <!-- <input class="input" v-model="searchTxt" placeholder="可输入医生名称" type="text"> -->

                <u-search :config="searchTxt" style="margin-left: 20px" @submit="submit"></u-search>

                <!-- <img v-show="searchTxt ? true : false" class="imginp2"
                    src="https://cdn7.axureshop.com/demo/2208121/images/%E7%A7%91%E5%AE%A4%E5%88%97%E8%A1%A8/u685.svg"
                    alt="" @click="clearInp"> -->
            </div>
            <div v-for="v in filteredItems" :key="v._id" @click="pathDoctorHome(v._id)">
                <DoctorItems :message="v" />
            </div>
        </div>

        <div v-else>
            <div class="inpText">
                <img src="https://cdn7.axureshop.com/demo/2208121/images/%E7%A7%91%E5%AE%A4%E5%88%97%E8%A1%A8/u684.svg"
                    alt="" class="imginp">
                <input class="input" placeholder="暂无数据可查" disabled type="text">
                <img v-show="searchTxt ? true : false" class="imginp2"
                    src="https://cdn7.axureshop.com/demo/2208121/images/%E7%A7%91%E5%AE%A4%E5%88%97%E8%A1%A8/u685.svg"
                    alt="" @click="clearInp">
            </div>
            <div class="noData" style="text-align: center;">
                <van-empty image="search" description="暂无医生" />
            </div>
        </div>
        {{ searconfig }}
    </div>
</template>

<script setup lang="ts">
import DoctorItems from '@/components/zzh/doctorLs/DoctorItems.vue'
import { onMounted, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { SearchConfig } from '@/use/SearchConfig'

// let searchTxt = ref('')
let route = useRoute()
let router = useRouter()
let personLs: any = ref([])
let text = ref(route.query.text)
const isLoading = ref(true); // 添加加载状态
const onClickLeft = () => history.back();

const searchTxt: any = ref<SearchConfig>({
    search: '', //可选输入框默认值
    keywords: ['中医外科门诊', '主任医师', '四川', '刘医生', '范医生'], // 搜索框关键字滚动
    hotSearchList: [
        '中医外科门诊',
        '主任医师',
        '四川',
        '范医生',
        '刘医生',
        '完美世界',
        '鬼灭之刃',
        '间谍过家家',
        '武动乾坤',
        '神印王座'
    ] // top10 热门搜索 最多显示10条数据
})
const searconfig = ref('')

const submit = (val: string) => {
    console.log(val)
    searconfig.value = val

    // window.open('/all?keyword=' + val)
}


onMounted(() => {
    getDoctorList()
})

// 获取数据
const getDoctorList = async () => {
    try {
        let { data: { person } } = await axios.get('http://localhost:3000/Person', {
            params: {
                text: text.value
            }
        })
        console.log(person)
        personLs.value = person
    } finally {
        isLoading.value = false; // 数据加载完成后设置为 false
    }

}
// 搜索医生
const filteredItems = computed(() => {
    if (searchTxt.value) {
        return personLs.value.filter((item: { name: string | string[], job: string | string[] }) => {
            // 如果name是字符串数组，则使用some方法来检查是否有任意一个元素包含搜索文本
            const nameMatch = Array.isArray(item.name) ? item.name.some(name => name.includes(searconfig.value)) : item.name.includes(searconfig.value);
            // 同样地，如果job是字符串数组，则使用some方法来检查是否有任意一个元素包含搜索文本
            const jobMatch = Array.isArray(item.job) ? item.job.some(job => job.includes(searconfig.value)) : item.job.includes(searconfig.value);

            // 只要name或者job匹配就返回true
            return nameMatch || jobMatch;
        });
    } else {
        return personLs.value;
    }
});





// 跳转医生主页
const pathDoctorHome = (id: any) => {
    router.push({
        path: '/doctorHome',
        query: {
            id: id
        }
    })
}


const clearInp = () => {
    searchTxt.value = ''
}

</script>

<style lang="scss" scoped>
.doctorListback {
    background: #f2f2f2;
    height: 100vh;
    overflow: auto;

    .inpText {
        position: relative;

        .imginp {
            width: 18px;
            height: 18px;
            position: absolute;
            top: 12px;
            left: 10px;
        }

        .imginp2 {
            width: 18px;
            height: 18px;
            position: absolute;
            top: 12px;
            right: 10px;
        }

        .input {
            width: 100%;
            height: 40px;
            border: 1px solid #e6e6e6;
            padding-left: 30px;
            box-sizing: border-box;
            font-size: 14px;
        }
    }

    .noData {
        width: 100%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        font-size: 14px;
        color: #999999;
    }

    .loading {
        text-align: center;
        margin-top: 50px;
        font-size: 16px;
        color: #000;
    }
}
</style>